<template>
  <div class="article-list">
    <!-- 下拉刷新  refresh事件在下拉时候触发 -->
    <van-pull-refresh v-model="isLoading" :success-text="refreshSuccessText" :success-duration="1500" @refresh="onRefresh">
      <!-- list列表 -->
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" error-text="请求失败，点击重新加载" :error.sync="error">
        <!-- <van-cell v-for="(article, index) in list" :key="index" :title="article.title" /> -->

        <article-item v-for="(article, index) in list" :key="index" :article="article"></article-item>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticles } from '@/api/article'
import ArticleItem from '@/components/article-item'
export default {
  name: 'article-list',
  props: {
    channel: {
      type: Object,
      required: true
    }
  },
  // import引入的组件需要注入到对象中才能使用
  components: {
    ArticleItem
  },
  data() {
    // 这里存放数据
    return {
      list: [], // 存储列表数组的数组
      loading: false, // 控制加载中loading状态  为true时候不加载数据提示加载中，为false则加载数据
      finished: false, // 控制数据加载结束的状态 为true时不再加载数据  为false则加载数据
      timestamp: null, // 时间戳
      error: false, // 控制失败提示的显示与隐藏
      isLoading: false, // 控制下拉刷新状态
      refreshSuccessText: '刷新成功' // 控制下拉刷新成功后提升文本
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    async onLoad() {
      try {
        // 1、发起异步请求
        const { data } = await getArticles({ channel_id: this.channel.id, timestamp: this.timestamp || Date.now() })

        // 模拟随机失败效果
        // if (Math.random() > 0.5) {
        //   JSON.parse('dajioef')
        // }

        // 二、把请求数据放到list数组中
        const { results } = data.data
        // 数据的展开运算符，将数组中每个元素展开放入list中
        this.list.push(...results)
        // 三、 数据加载结束后，将等待界面关闭
        this.loading = false
        // 四、判断数据是否全部加载完成
        // results不为空，获取下一页时间戳，results为空代表数据已加载完成 finished改为false，数据加载结束
        if (results.length) {
          // 更新获取下一页时间戳
          this.timestamp = data.data.pre_timestamp
        } else {
          // 如果results.length 为空将finished设置为true，不在load加载更多
          this.finished = true
        }
      } catch (err) {
        console.log('获取新闻列表失败', err)
        // 显示错误提示
        this.loading = false
        this.error = true
      }
    },
    // 下拉刷新，触发此事件
    async onRefresh() {
      try {
        // 发送请求
        // 1、发起异步请求获取数据
        const { data } = await getArticles({ channel_id: this.channel.id, timestamp: Date.now() })
        // 测试刷新失败代码
        // if (Math.random() > 0.5) {
        //   JSON.parse('dajioef')
        // }
        // 2 解构出结果，将新数据追加到列表的顶部
        const { results } = data.data
        this.list.unshift(...results)
        // 3 关闭loading提示
        this.isLoading = false
        // 4 提示下拉刷新成功后的文本
        this.refreshSuccessText = `刷新成功，更新了${results.length}条数据`
      } catch (err) {
        this.isLoading = false
        this.refreshSuccessText = '刷新失败'
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.article-list {
  // 百分比单位是相对父元素的
  // height: 100%;
  height: 79vh;
  overflow-y: auto;
}
</style>
